

<template>
    <tm-app class="phoneLogin" bgImg="white" :style="{paddingTop:systemInfo.statusBarHeight+'px'}">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <tm-navbar style="postion:relative;z-index:10;" :height="50" :margin="[0,0]" :padding="[0,0]" :isPlace="false" :fontSize="32" title="重置密码" :transprent="true">
			<!-- <template v-slot:right>
				<tm-icon _class="px-32" name="tmicon-plus"></tm-icon>
			</template>  -->
		</tm-navbar>
        <view class="content psr" style="z-index:10;">
            <view class="inps" >

                <view class="inp_box d-flex a-center" :class="{focus:inp1Focus}">
                    <view class="pre d-flex a-center j-center">
                        <view class="txt d-flex a-center j-center">+86</view>
                        <view style="height:40rpx;border-right:1px solid#ccc;"></view>
                    </view>
                    <input @focus="inp1Focus=true" @blur="inp1Blur" maxlength="11" type="number" class="inp"  v-model="phoneNum" placeholder="请输入11位手机号"/>
                </view>

                
                <!-- <view class="inp_box d-flex a-center j-between" :class="{focus:inp1Focus,error:phoneError}">
                    <view class="pre d-flex j-center">+86</view>
                    <input @focus="inp1Focus=true" @blur="inp1Blur" maxlength="11" type="number" class="inp"  v-model="phoneNum" placeholder="请输入11位手机号"/>
                </view> -->

                <view class="inp_box d-flex a-center" style="margin-top:20rpx;" :class="{focus:inp2Focus}">
                    <view class="pre d-flex a-center j-center">
                        <view class="txt d-flex a-center j-center">
                            <i class="tmicon tmicon-key" style="font-size:30rpx;"></i>
                        </view>
                        <view style="height:40rpx;border-right:1px solid#ccc;"></view>
                    </view>
                    <input @focus="inp2Focus=true" @blur="inp2Blur" maxlength="6" type="number" class="inp" style="width:280rpx;" v-model="vailCode" placeholder="请输入验证码"/>
                    <view v-show="showGetCode" class="btn d-flex a-center j-center" @tap="getCode">
                        <text class="text1">获取验证码</text>
                    </view>
                    <view v-show="!showGetCode" class="btn seconds d-flex a-center j-center">{{ seconds }}</view>
                </view>

                <!-- <view class="inp_box d-flex a-center j-between" style="margin-top:40rpx;" :class="{focus:inp2Focus}">
                    <input @focus="inp2Focus=true" @blur="inp2Blur" maxlength="6" type="number" class="inp" style="width:300rpx;margin-left:10rpx;text-align: center;"  v-model="vailCode" placeholder="请输入验证码"/>
                    <view v-show="showGetCode" class="btn d-flex a-center j-center" @tap="getCode">
                        <text class="text1">获取验证码</text>
                    </view>
                    <view v-show="!showGetCode" class="btn d-flex a-center j-center">{{ seconds }}</view>
                </view> -->
            </view>

            <!-- <view class="inps" v-show="authed">
                <view class="desp">
                    账号:{{ phoneNum }}
                </view>

                <view class="inp_box d-flex a-center" :class="{focus:inp3Focus}">
                    <view class="pre d-flex a-center j-center">
                        <view class="txt d-flex a-center j-center">
                            <i class="tmicon tmicon-lock" style="font-size:30rpx;"></i>
                        </view>
                        <view style="height:40rpx;border-right:1px solid#ccc;"></view>
                    </view>
                    <input @focus="inp3Focus=true" @blur="inp3Blur" minlength="8" maxlength="16" :type="inp3Type" class="inp" style="width:370rpx;"  v-model="password" placeholder="请输入密码"/>
                    <view class="btn btn1 d-flex a-center j-center" @tap="triggleType3">
                        <i class="tmicon tmicon-eye-fill" v-show="inp3Type==='password'"></i>
                        <i class="tmicon tmicon-eyeslash-fill" v-show="inp3Type==='text'"></i>
                    </view>
                </view>

                <view class="inp_box d-flex a-center" style="margin-top:20rpx;" :class="{focus:inp4Focus}">
                    <view class="pre d-flex a-center j-center">
                        <view class="txt d-flex a-center j-center">
                            <i class="tmicon tmicon-lock" style="font-size:30rpx;"></i>
                        </view>
                        <view style="height:40rpx;border-right:1px solid#ccc;"></view>
                    </view>
                    <input @focus="inp4Focus=true" @blur="inp3Blur" minlength="8" maxlength="16" :type="inp4Type" class="inp" style="width:370rpx;"  v-model="password2" placeholder="请输入密码"/>
                    <view class="btn btn1 d-flex a-center j-center" @tap="triggleType4">
                        <i class="tmicon tmicon-eye-fill" v-show="inp4Type==='password'"></i>
                        <i class="tmicon tmicon-eyeslash-fill" v-show="inp4Type==='text'"></i>
                    </view>
                </view>

                <view class="desp1 fs24">
                    密码仅支持数字、英文字母、下划线或横线
                </view>

            </view> -->

            <view class="btn_main d-flex a-center j-center" @tap="check">验证</view>




            

        </view>

    </tm-app>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onReady, onShow } from "@dcloudio/uni-app";
import { wxAuth,getUserDetail,getVerCode,codeLogin,pwdLogin,checkCode,resetPassword } from "@/api/api";
import md5 from 'js-md5';
import { userData as userDataStore }  from '@/store/userData'
import { imLogin } from '@/hooks/imLogin'

import { config as configStore } from "@/store/config";
const config: any = configStore();
const handleCheck = (bool:Boolean) => {
    config.setConfig({agreement:bool});

};

const userData:any = userDataStore();
const msg:any = ref(null);
const readed = ref(false);

import { systemInfo as  systemInfoStore}  from '@/store/systemInfo'


const systemInfo:any = systemInfoStore();


const inp1Focus = ref(false);
const inp2Focus = ref(false);
const inp3Focus = ref(false);
const inp4Focus = ref(false);

const phoneNum = ref(null);
const vailCode = ref(null);
const phoneError = ref(true);
const seconds = ref(60);
const showGetCode = ref(true);
const authed = ref(false);
const inp3Type = ref('password');
const inp4Type = ref('password');
const password = ref(null);
const password2 = ref(null);


const inp1Blur = ()=>{
    inp1Focus.value=false;
    const bool = uni.$tm.u.isPhone(phoneNum.value);
    phoneError.value = !bool;
}

const inp2Blur = ()=>{
    inp2Focus.value=false;
}

const inp3Blur = ()=>{
    inp3Focus.value=false;
}

const inp4Blur = ()=>{
    inp4Focus.value=false;
}
const triggleType3 = ()=>{
    inp3Type.value = inp3Type.value === 'password'?'text':'password';
}

const triggleType4 = ()=>{
    inp4Type.value = inp4Type.value === 'password'?'text':'password';
}

const check = async ()=>{



    if(!vailCode.value){
        uni.showToast({
            icon: "none",
            title: '请输入正确的验证码',
            duration: 1500,
        });
        return
    }

    const params = {
        phone:phoneNum.value,
        authCode:md5(vailCode.value),
		messageType:3
    }

    console.log(params);

    const res:any = await checkCode(params);
    console.log(res);

    const {flag,message} = res;
    if(flag!==1){
        uni.showToast({
            icon: "none",
            title: message||'验证码错误，请稍后再试!',
            duration: 1500,
        });
        return;
    }

    uni.showToast({
            icon: "none",
            title: '验证成功，请设置密码',
            duration: 1500,
        });


    setTimeout(()=>{
        uni.navigateTo({
            url: `/pages/forgetPwd/setPwd?phone=${phoneNum.value}&code=${vailCode.value}`,
        });
    },1500)




    authed.value = true;


}



const getCode = async ()=>{
    seconds.value = 60;
    showGetCode.value = false;

    const bool = uni.$tm.u.isPhone(phoneNum.value);
    if(!bool){
        uni.showToast({
            icon: "none",
            title: '您输入的手机号有误，请检查',
            duration: 1500,
        });
        return
    }

    const res:any = await getVerCode({phone:phoneNum.value,messageType:'3'});
    const { flag } = res;
    if(flag===1){
        uni.showToast({
            icon: "none",
            title: '验证码已成功发送',
            duration: 1500,
        });
        let int = setInterval(()=>{

            if(seconds.value===1){
                showGetCode.value = true;
                clearInterval(int);
                return
            }

            seconds.value = seconds.value-1
        },1000)
    }

    
}





const resetPwd = async()=>{
    if(!password.value){
        uni.showToast({
            icon: "none",
            title: '请输入密码',
            duration: 1500,
        });
        return
    }

    if(password.value!==password2.value){
        uni.showToast({
            icon: "none",
            title: '两次输入的密码不一致',
            duration: 1500,
        });
        return
    }
    const params = {
        phone:phoneNum.value,
        password:password.value,
        authCode:md5(vailCode.value),
    }

    const res:any = await resetPassword(params);
    const {flag,message} = res;

    if(flag!==1){
        uni.showToast({
            icon: "none",
            title: message||'重置密码失败，请稍后再试',
            duration: 1500,
        });
        return;
    }

    uni.showToast({
            icon: "none",
            title: '重置密码成功，请用新密码登录',
            duration: 1500,
        });




    setTimeout(()=>{
        uni.redirectTo({
            url: '/pages/phoneLogin/phoneLogin?loginType=password',
            animationType: 'fade-in',
        });

    },2000)

    
}




onReady(() => {
});

onShow(() => {});
</script>

<style lang="scss" scoped>
.phoneLogin{
    .content{
        padding:0 60rpx;
        padding-top:50px;
    }

    .inps{
        width:100%;
        .desp{
            padding:10rpx 40rpx;
            font-size:28rpx;
            color:#39393b;
        }
        .desp1{
            padding:10rpx 40rpx;
            font-size:24rpx;
            color:#999;
        }

        .inp_box{
            width:570rpx;
            height:82rpx;
            border:1px solid #ddd;
            border-radius: 20rpx;
            padding:20rpx;
            margin:0 auto;
            &.focus{
                border:1px solid $slim-main;
            }
            &.error{
                border:1px solid $slim-error;
            }
            .pre{
                width:100rpx;
                color:#666;
                font-size:28rpx;
                margin-right:20rpx;
                .txt{
                    width:80rpx;
                }
            }
            .inp{
                width:460rpx;
                font-size:28rpx;
            }

            .text1{
                    color:$slim-main;
                }
                .text2{
                    color:#999;
                }

            .btn{
                color:$slim-main;
                width:200rpx;
                height:100%;
                font-size:28rpx;
                &.btn1{
                    width:50rpx;
                    justify-content: flex-end;
                }
                &.seconds{
                    color:#999;
                }
                .tmicon{
                    font-size:40rpx;
                    color:#999;
                }
                &:active{
                    opacity: .7;
                }
            }
        }

        // .inp_box{
        //     width:100%;
        //     height:100rpx;
        //     border:1px solid #ddd;
        //     border-radius: 20rpx;
        //     padding:20rpx;
        //     &.focus{
        //         border:1px solid $slim-main;
        //     }
        //     &.error{
        //         border:1px solid $slim-error;
        //     }
        //     .pre{
        //         width:100rpx;
        //         color:#666;
        //         font-size:32rpx;
        //     }
        //     .inp{
        //         width:450rpx;
        //         font-size:32rpx;
        //     }

        //     .text1{
        //             color:$slim-main;
        //         }
        //         .text2{
        //             color:#999;
        //         }

        //     .btn{
        //         color:$slim-main;
        //         width:200rpx;
        //         height:100%;
        //         &.btn1{
        //             width:100rpx;
        //             justify-content: flex-end;
        //         }
        //         .tmicon{
        //             font-size:40rpx;
        //             color:#999;
        //         }
        //         &:active{
        //             opacity: .7;
        //         }
        //     }
        // }
    }

    .btn_main{
        width:570rpx;
        height:86rpx;
        background:$slim-main;
        border-radius: 20rpx;
        margin:0 auto;
        margin-top:40rpx;
        color:#fff;
        font-size:32rpx;
        &:active{
            opacity: .7;
        }
        
    }

    .pasawordLogin{
        width:100%;
        height:100rpx;
    }

    .bottom_box{
        position: fixed;
        width:100%;
        bottom:100rpx;
        left:0;
        .wxLogo{
            width:140rpx;
            height:120rpx;
            border-radius:60rpx;
            background:$slim-main;
        }
    }

    .error-text{
        padding-left:160rpx;
        font-size:24rpx;
        height:60rpx;
        color:$slim-error;
        margin-bottom:20rpx;
    }
}
</style>
